<script setup lang="ts">
import EnergyStructureAnalysis from '../EnergyStructureAnalysis/EnergyStructureAnalysis.vue'
import TrendOfOutputIndex from '../TrendOfOutputIndex/TrendOfOutputIndex.vue'
import LeverEnterprises from '../LeverEnterprises/LeverEnterprises.vue'

import useLeverEnterprises from '../LeverEnterprises/useLeverEnterprises'
import useEnergyStructureAnalysis from '../EnergyStructureAnalysis/useEnergyStructureAnalysis'

const { lists, getLeverEnterprises } = useLeverEnterprises()
const { data, getEnergyStructureAnalysis } = useEnergyStructureAnalysis()

onMounted(() => {
  getLeverEnterprises()
  getEnergyStructureAnalysis()
})
</script>

<template>
  <aside class="position-absolute aside aside-right">
    <div class="h-100 px-sm-3 d-flex flex-column align-items-end justify-content-start aside-wrap">
      <EnergyStructureAnalysis :data="data?.slice(0, 6)" />
      <TrendOfOutputIndex v-if="false" />
      <LeverEnterprises :data="lists" />
    </div>
  </aside>
</template>

<style scoped>
.aside-right {
  right: 0;
  background-image: url('./lock-right.png');
}
</style>
